/*
* created by Administrator on 2018/12/4
* 好的代码像粥一样,是得用时间和精力熬的。
*/
/*
* v-for 循环数组
* v-on @ 绑定事件
* v-if 显示隐藏元素
* v-else 显示隐藏元素
* v-else-if 显示隐藏元素
* v-bind ： 绑定元素属性
* v-show 显示隐藏元素
* v-html 绑定html到内容区域
* v-text 绑定文本到内容区域
* v-pre 跳过编译
* v-model 双向数据绑定
* .lazy 双向数据绑定时会在光标消失后在绑定
* .number 将输入的字符串转换为数字
* v-cloak 防止页面闪烁
*
*
*
* */
//过滤器
Vue.filter('toGender',function (value) {
    return value ? '男':'女';
});

let app = new Vue({
    el:'#root',
    data:{
        userDate:Mock.mock({
            'data|10':[{
                name:'@cname',
                gender:'@boolean',
                city:'@city',
                phoneNumber:/^1[35789]\d{9}$/,
                age:'@integer(16,30)'
            }]
        }).data,
        mas:'hello world',
        isLogIn:true,
        href:'www.baidu.com',
        ipt:'',
        ipts:'',
        ftBat:['男生','女生','20以下','移动客户'],
        selectedKey:-1,
        show: true,
    },
    methods:{
        clickToDel(index) {
            this.show =!this.show;
            this.userDate.splice(index, 1);
        },
        select(key){
            this.selectedKey = key;
            // let selectedFns = {
            //     0:(value => value.gender),
            //     1:(value => !value.gender),
            //     2:(value => value.age<20),
            //     3:(value => /^1[3458]/.test(value.phoneNumber)),
            // };
            // this.userDate = this.userDate.filter(selectedFns[key]);
        }
    },
    computed:{
        flilerUser: function () {
            let selectedFns = {
                '-1':()=> true,
                0:(value => value.gender),
                1:(value => !value.gender),
                2:(value => value.age<20),
                3:(value => /^1[3458]/.test(value.phoneNumber)),
            };
            // if (this.selectedKey === 0){
            //     this.userDate = this.userDate.filter(value => value.gender);
            // }
            // if (this.selectedKey === 1){
            //     this.userDate = this.userDate.filter(value => !value.gender);
            // }
            // if (this.selectedKey === 2){
            //     this.userDate = this.userDate.filter(value => value.age<20);
            // }
            // if (this.selectedKey === 3){
            //     this.userDate = this.userDate.filter(value => /^1[3458]/.test(value.phoneNumber));
            // }
            return this.userDate.filter(selectedFns[this.selectedKey]);
        }
    }
})
